/*
 * 用户中心 用户信息组件
 */
<script>
    export default {
        name: "ys-head-userinfo",
        props: {

        },
        data() {
          return{
            face_url: "../../static/images/icons/noface.png",   //头像url
            nickname: "大家好!",                               //昵称
            mobile: "13786032480"                            //手机
          }
        }
    }
</script>
<template>
    <view class="userinfo">
        <view class="face" :style="'background-image: url('+face_url +');'"></view>
        <view class="nickname">{{nickname}}</view>
        <view class="mobile">{{mobile}}</view>
    </view>
</template>
<style lang="scss">
    .userinfo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 366upx;
        background: url('~@/static/images/ucenter_bg.jpg') no-repeat;
        background-size: 100% 100%;      
        .face {
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 108upx;
            height: 108upx;
        }
        .nickname {
            text-align: center;
            margin-top: 30upx;
            font-size: 36upx;
            font-weight: bold;
        }
        .mobile {
            text-align: center;
            margin-top: 30upx;
        }
    }
</style>